<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title th:text="${product != null ? '修改商品' : '新增商品'}">商品新增/修改</title>
  <!-- 引入Bootstrap样式（路径需与项目静态资源一致） -->
  <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
  <style>
    .card { margin-bottom: 20px; }
    .preview-img { width: 100%; height: auto; margin-top: 10px; }
    .container { margin-top: 30px; }
  </style>
</head>
<body>
<div class="container">
  <!-- 页面标题：根据是否有product数据动态显示“新增/修改” -->
  <h3 th:text="${product != null ? '修改商品' : '新增商品'}">商品操作</h3>
  
  <div class="row">
    <!-- 模块1：商品信息（8列）- 表单 -->
    <div class="col-md-8">
      <div class="card">
        <div class="card-body">
          <form id="productForm">
            <!-- 隐藏ID：修改时传递，新增时为空 -->
            <input type="hidden" id="id" th:value="${product?.id}">
            
            <!-- 商品名称（必填） -->
            <div class="mb-3">
              <label class="form-label">商品名称</label>
              <input type="text" class="form-control" id="name"
                     th:value="${product?.name}" required>
            </div>
            
            <!-- 商品价格（必填，支持小数） -->
            <div class="mb-3">
              <label class="form-label">商品价格</label>
              <input type="number" step="0.01" class="form-control" id="price"
                     th:value="${product?.price}" required>
            </div>
            
            <!-- 商品库存（必填） -->
            <div class="mb-3">
              <label class="form-label">商品库存</label>
              <input type="number" class="form-control" id="stock"
                     th:value="${product?.stock}" required>
            </div>
            
            <!-- 商品分类（下拉选择） -->
            <div class="mb-3">
              <label class="form-label">商品分类</label>
              <select class="form-select" id="category" required>
                <option value="">请选择分类</option>
                <option value="电子产品" th:selected="${product?.category == '电子产品'}">电子产品</option>
                <option value="电脑配件" th:selected="${product?.category == '电脑配件'}">电脑配件</option>
                <option value="服装" th:selected="${product?.category == '服装'}">服装</option>
              </select>
            </div>
            
            <!-- 商品描述（文本域） -->
            <div class="mb-3">
              <label class="form-label">商品描述</label>
              <textarea class="form-control" id="description" rows="3"
                        th:text="${product?.description}"></textarea>
            </div>
            
            <!-- 商品图片URL（预览用） -->
            <div class="mb-3">
              <label class="form-label">商品图片URL</label>
              <input type="text" class="form-control" id="imageUrl"
                     th:value="${product?.imageUrl}"
                     placeholder="示例：https://picsum.photos/200">
            </div>
            
            <!-- 提交/返回按钮 -->
            <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
            <a href="/getProductTable" class="btn btn-secondary ms-2">返回商品表格</a>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 模块2：商品预览（4列）- 实时同步输入内容 -->
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">商品预览</div>
        <div class="card-body">
          <h5 id="previewName" th:text="${product?.name ?: '请输入商品名称'}">商品名称</h5>
          <p id="previewDesc" th:text="${product?.description ?: '请输入商品描述'}">商品描述</p>
          <p class="text-primary" id="previewPrice" th:text="${product != null && product.price != null && product.price.compareTo(new java.math.BigDecimal(0)) > 0 ? '¥' + product.price : '请输入价格'}">¥0.00</p>
          <p class="text-muted" id="previewStock" th:text="${product != null && product.stock != null && product.stock > 0 ? '库存：' + product.stock : '请输入库存'}">库存：0</p>
          <span class="badge bg-secondary" id="previewCategory" th:text="${product?.category ?: '请选择分类'}">分类</span>
          <!-- 图片预览：默认图+输入URL后更新 -->
          <img id="previewImg" class="preview-img"
               th:src="${product?.imageUrl ?: 'https://picsum.photos/200/200'}"
               alt="商品图片">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入JS：JQuery（Ajax用）+ Bootstrap（样式支持） -->
<script th:src="@{/login/js/jquery-3.6.0.js}"></script>
<script th:src="@{/login/js/bootstrap.bundle.min.js}"></script>

<!-- 实验五核心JS：1. 实时预览 2. 异步提交（判断新增/修改） -->
<script>
  // 1. 实时预览：输入表单时，同步更新预览区内容
  $('#name').on('input', function() { $('#previewName').text($(this).val() || '请输入商品名称'); });
  $('#description').on('input', function() { $('#previewDesc').text($(this).val() || '请输入商品描述'); });
  $('#price').on('input', function() { $('#previewPrice').text($(this).val() ? '¥' + $(this).val() : '请输入价格'); });
  $('#stock').on('input', function() { $('#previewStock').text($(this).val() ? '库存：' + $(this).val() : '请输入库存'); });
  $('#category').on('change', function() { $('#previewCategory').text($(this).val() || '请选择分类'); });
  $('#imageUrl').on('input', function() {
    let url = $(this).val() || 'https://picsum.photos/200/200';
    $('#previewImg').attr('src', url); // 实时更新图片预览
  });
  
  // 2. 异步提交表单：判断ID是否存在，决定调用“新增”或“修改”接口
  function submitForm() {
    // 收集表单数据（与Product实体类字段对应）
    let productData = {
      id: $('#id').val() || null, // 新增时为null，修改时为具体ID
      name: $('#name').val(),
      price: $('#price').val(),
      stock: $('#stock').val(),
      category: $('#category').val(),
      description: $('#description').val(),
      imageUrl: $('#imageUrl').val() || 'https://picsum.photos/200/200'
    };
    
    // 简单校验：必填项不能为空
    if (!productData.name || !productData.price || !productData.stock || !productData.category) {
      alert('商品名称、价格、库存、分类为必填项！');
      return;
    }
    
    // 核心逻辑：判断新增/修改（根据ID是否存在）
    let requestConfig = {};
    if (productData.id) {
      // 有ID：修改，调用PUT接口
      requestConfig = {
        url: '/updateProduct',
        method: 'PUT'
      };
    } else {
      // 无ID：新增，调用POST接口
      requestConfig = {
        url: '/addProduct',
        method: 'POST'
      };
    }
    
    // 发起Ajax请求（提交数据）
    $.ajax({
      url: requestConfig.url,
      method: requestConfig.method,
      contentType: 'application/json', // 重要：传递JSON格式数据
      data: JSON.stringify(productData), // 转换为JSON字符串
      success: function(resp) {
        if (resp === 'OK') {
          alert(productData.id ? '修改商品成功！' : '新增商品成功！');
          window.location.href = '/getProductTable'; // 成功后返回表格页
        } else {
          alert('操作失败，请重试！');
        }
      },
      error: function() {
        alert('网络错误，检查接口路径是否正确！');
      }
    });
  }
</script>
</body>
</html>